<template>
    <div class="divider-header"> 
      <div class="content">
        简单的ps系统
      </div>
    </div>
</template>

<script  setup lang="ts">
defineOptions({
  name: 'DividerHeader'
})
</script>

<style lang="less" scoped>
.divider-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}

.content {
position: relative;
font-size: 24px;
font-weight: bold;
color: #333;
padding: 0 20px;
}

.content::before,
.content::after {
content: '';
position: absolute;
top: 50%;
width: 50px;
height: 2px;
background-color: #e0e0e0;
}

.content::before {
right: 100%;
margin-right: 10px;
}

.content::after {
left: 100%;
margin-left: 10px;
}
</style>